<template>
  <div class="study-detail">
    <div class="header">
      <el-button @click="$emit('back')" class="back-button">
        <el-icon class="el-icon">
          <ArrowLeft />
        </el-icon>
        返回
      </el-button>
      <h1 class="page-title">{{ selectedCard?.title || '学习详情' }}</h1>
      <el-button type="primary" @click="handleAddCard" class="add-button">
        <el-icon class="el-icon">
          <Plus />
        </el-icon>
        添加卡片
      </el-button>
    </div>
    
    <div class="content">
      <div class="search-container">
        <div class="search-wrapper">
          <el-input
            v-model="searchText"
            placeholder="搜索卡片..."
            class="search-input"
            clearable
            @input="handleSearch"
          >
            <template #prefix>
              <el-icon class="search-icon"><Search /></el-icon>
            </template>
          </el-input>
        </div>
      </div>

      <el-empty 
        v-if="!loading && cardItems.length === 0" 
        description="暂无卡片"
        class="empty-state"
      >
        <el-button type="primary" @click="handleAddCard">创建第一张卡片</el-button>
      </el-empty>
      <div v-if="loading && cardItems.length === 0" class="loading-container">
        <div class="loading-spinner">
          <div class="spinner-circle"></div>
          <div class="spinner-circle"></div>
          <div class="spinner-circle"></div>
        </div>
        <span class="loading-text">加载中...</span>
      </div>
      <div v-else class="card-list" v-infinite-scroll="loadMore" :infinite-scroll-disabled="loading || noMore" infinite-scroll-distance="10">
        <div v-for="card in cardItems" 
             :key="card.id" 
             class="card-item">
          <div class="card-content" @click="goToMarkdownEditor(card)">
            <h3 class="card-title">{{ card.title }}</h3>
            <div class="card-info">
              <span class="jiwei-count">
                <el-icon><Medal /></el-icon>
                {{ card.readNum || 0 }}
              </span>
            </div>
          </div>
          <div class="card-actions">
              <el-button 
              type="danger" 
              link
              @click="handleDeleteCard(card)"
              class="action-button"
            >
              <el-icon class="el-icon">
                <Delete />
              </el-icon>
              删除
            </el-button>
          </div>
        </div>
        <div v-if="loading" class="loading-more">
          <el-icon class="is-loading"><Loading /></el-icon>
          <span>加载中...</span>
        </div>
        <div v-if="noMore && cardItems.length > 0" class="no-more">
          没有更多数据了
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { deleteArticle, getArticleList } from '@/api/article'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowLeft, Plus, Edit, Delete, Medal, Loading, Search } from '@element-plus/icons-vue'
import { debounce } from 'lodash-es'

export default {
  name: 'StudyDetailPage',
  props: {
    selectedCard: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      cardItems: [],
      loading: false,
      noMore: false,
      searchText: '',
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        categoryId: null,
        title: ''
      }
    }
  },
  created() {
    this.debouncedSearch = debounce(this.handleSearch, 300)
  },
  watch: {
    'selectedCard.id': {
      handler(newVal) {
        console.log("id是",newVal)
        if (newVal) {
          this.queryParams.categoryId = newVal
          this.resetList()
          this.fetchArticleList()
        }
      },
      immediate: true
    }
  },
  methods: {
    resetList() {
      this.cardItems = []
      this.queryParams.pageNum = 1
      this.noMore = false
    },
    async fetchArticleList() {
      if (this.loading || this.noMore) return
      
      try {
        this.loading = true
        const response = await getArticleList(this.queryParams)
        if (response.data.success) {
          const newItems = response.data.data.records.map(item => ({
            id: item.id,
            text: item.content,
            title: item.title,
            categoryId: item.categoryId,
            readNum: item.readNum
          }))
          this.total = response.data.data.total
          this.cardItems = [...this.cardItems, ...newItems]
          
          // 判断是否还有更多数据
          this.noMore = newItems.length < this.queryParams.pageSize
          if (!this.noMore) {
            this.queryParams.pageNum++
          }
        }
      } catch (error) {
        ElMessage.error('获取卡片列表失败')
        console.error('获取卡片列表失败:', error)
      } finally {
        this.loading = false
      }
    },
    loadMore() {
      this.fetchArticleList()
    },
    goToMarkdownEditor(card) {
      this.$emit('edit-card', {
        id: card.id,
        title: card.title || this.selectedCard?.title || '未命名卡片',
        content: card.text,
        categoryId: card.categoryId,
        cardList: this.cardItems,
        readNum: card.readNum,
        totalCount: this.total,
        currentIndex: this.cardItems.findIndex(item => item.id === card.id)
      })
    },
    async handleDeleteCard(card) {
      try {
        await ElMessageBox.confirm('确定要删除这张卡片吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        await deleteArticle(card.id)
        ElMessage.success('删除成功')
        // 重置列表并重新加载
        this.resetList()
        await this.fetchArticleList()
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('删除失败')
        }
      }
    },
    handleAddCard() {
      this.$emit('edit-card', {
        title: null,
        content: '',
        cardList: this.cardItems,
        currentIndex: -1,
        categoryId: this.selectedCard?.id
      })
    },
    updateCardList(newCard) {
      this.fetchArticleList() // 重新加载列表以获取最新数据
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.queryParams.pageNum = 1
      this.fetchArticleList()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.fetchArticleList()
    },
    handleSearch() {
      this.queryParams.title = this.searchText
      this.resetList()
      this.fetchArticleList()
    }
  }
}
</script>

<style scoped>
.study-detail {
  padding: 24px;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  flex: 1;
  text-align: center;
}

.back-button {
  padding: 8px 16px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.back-button:hover {
  transform: translateX(-2px);
}

.add-button {
  padding: 8px 20px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.add-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.empty-state {
  background: #fff;
  border-radius: 12px;
  padding: 48px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.skeleton-loading {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.card-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.card-content {
  flex: 1;
  cursor: pointer;
  padding-right: 20px;
}

.card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 8px 0;
}

.card-preview {
  font-size: 0.9rem;
  color: #666;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

.card-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.action-button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 0.9rem;
}

.action-button .el-icon {
  font-size: 1rem;
}

.card-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.jiwei-count {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #67c23a;
  font-size: 14px;
}

.jiwei-count .el-icon {
  font-size: 16px;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.loading-spinner {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.spinner-circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #409EFF;
  animation: bounce 0.5s ease-in-out infinite;
}

.spinner-circle:nth-child(2) {
  animation-delay: 0.1s;
}

.spinner-circle:nth-child(3) {
  animation-delay: 0.2s;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.loading-text {
  color: #909399;
  font-size: 14px;
}

.loading-more,
.no-more {
  text-align: center;
  padding: 16px;
  color: #909399;
  font-size: 14px;
  background: #fff;
  border-radius: 12px;
  margin-top: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.loading-more .el-icon {
  font-size: 16px;
  animation: rotating 1s linear infinite;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.search-container {
  margin-bottom: 20px;
  padding: 0;
}

.search-wrapper {
  width: 100%;
  margin: 0;
  position: relative;
}

.search-input {
  width: 100%;
}

.search-input :deep(.el-input__wrapper) {
  background-color: #f5f7fa;
  box-shadow: none !important;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 0 20px;
  height: 40px;
  transition: all 0.3s ease;
}

.search-input :deep(.el-input__wrapper:hover) {
  background-color: #fff;
  border-color: #c0c4cc;
}

.search-input :deep(.el-input__wrapper.is-focus) {
  background-color: #fff;
  border-color: #409EFF;
  box-shadow: 0 0 0 1px #409EFF !important;
}

.search-input :deep(.el-input__inner) {
  height: 40px;
  font-size: 14px;
  color: #606266;
}

.search-input :deep(.el-input__inner::placeholder) {
  color: #909399;
}

.search-icon {
  font-size: 16px;
  color: #909399;
  margin-right: 8px;
}

.search-input :deep(.el-input__clear) {
  color: #909399;
  font-size: 14px;
}

.search-input :deep(.el-input__clear:hover) {
  color: #409EFF;
}

@media (max-width: 768px) {
  .study-detail {
    padding: 16px;
  }

  .header {
    padding: 12px 16px;
    margin-bottom: 16px;
  }

  .page-title {
    font-size: 1.2rem;
  }

  .back-button,
  .add-button {
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  .card-item {
    padding: 16px;
  }

  .card-title {
    font-size: 1rem;
  }

  .card-preview {
    font-size: 0.85rem;
  }

  .action-button {
    padding: 4px;
  }

  .action-button span {
    display: none;
  }

  .action-button .el-icon {
    margin: 0;
  }

  .card-info {
    margin-top: 4px;
  }
  
  .jiwei-count {
    font-size: 12px;
  }
  
  .jiwei-count .el-icon {
    font-size: 14px;
  }

  .loading-container {
    padding: 32px;
  }

  .spinner-circle {
    width: 10px;
    height: 10px;
  }

  .loading-text {
    font-size: 12px;
  }

  .loading-more {
    padding: 12px;
    font-size: 12px;
  }

  .loading-more .el-icon {
    font-size: 14px;
  }

  .search-container {
    margin-bottom: 16px;
    padding: 0;
  }

  .search-wrapper {
    width: 100%;
  }

  .search-input :deep(.el-input__wrapper) {
    height: 36px;
    padding: 0 16px;
    border-radius: 18px;
  }

  .search-input :deep(.el-input__inner) {
    height: 36px;
    font-size: 13px;
  }

  .search-icon {
    font-size: 14px;
    margin-right: 6px;
  }

  .search-input :deep(.el-input__clear) {
    font-size: 12px;
  }
}
</style> 